<template>
	<view class="uni-global-box" >
		<view class="uni-global-title">
			服务项目 / 服务项目 / 修改项目模板
		</view>
		<view class="body">
			<u-form :model="form" ref="form1" class="u-form" label-width="0" >
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						服务项目图片
					</view>
					<u-form-item prop="image" :border-bottom="false">
						<uni-file-picker 
							v-model="image" file-mediatype="image"
							:image-styles="{width:'100%',height:'200'}"
							limit="1"
							@success="successImage"
						>
							<view class="u-form-image">
								<text class="iconfont icon-shangchuanyunduan"></text>
							</view>
						</uni-file-picker>
						
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						<text class="u-form-required">*</text>
						项目名称
					</view>
					<u-form-item prop="title" :border-bottom="false">
						<u-input class="u-form-input"   v-model="form.title" style="margin:0" 
							placeholder="请输入项目名称"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						单次价格
					</view>
					<u-form-item prop="price_one" :border-bottom="false">
						<u-input class="u-form-input"  type="number" v-model="form.price_one" style="margin:0" 
							placeholder="请输入单次价格"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						服务时间(ms)
					</view>
					<u-form-item prop="time" :border-bottom="false">
						<u-input class="u-form-input"  type="number" v-model="form.time" style="margin:0" 
							placeholder="请输入服务时间"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						服务时间说明
					</view>
					<u-form-item prop="time_text" :border-bottom="false">
						<u-input class="u-form-input"   v-model="form.time_text" style="margin:0" 
							placeholder="请输入服务时间说明"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						下单量
					</view>
					<u-form-item prop="orders" :border-bottom="false">
						<u-input class="u-form-input"  type="number" v-model="form.orders" style="margin:0" 
							placeholder="请输入下单量"
						/>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						服务说明
					</view>
					<u-form-item prop="content" :border-bottom="false">
						<u-input class="u-form-textarea" type="textarea" v-model="form.content" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						服务类型
					</view>
					<u-form-item   :border-bottom="false">
						<u-radio-group v-model="classify" @change="changeClassify" >
							<u-radio v-for="(item, index) in rangeClassify" :key="index" :name="item._id"
								:disabled="item.disabled">
								{{ item.title }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						排序
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-input class="u-form-input" type="number" v-model="form.sort" style="margin:0" />
					</u-form-item>
				</view>
				<view class="u-form-textInput">
					<view class="u-form-name">
						是否展示
					</view>
					<u-form-item prop="sort" :border-bottom="false">
						<u-form-item label="" prop="radio"  :border-bottom="false">
							<u-radio-group v-model="form.is_show"  >
								<u-radio v-for="(item, index) in radioList1" :key="index" :name="item.value"
									:disabled="item.disabled">
									{{ item.name }}
								</u-radio>
							</u-radio-group>
						</u-form-item>
					</u-form-item>
				</view>
				<u-button @click="submit" type="primary" >提交</u-button>
			</u-form>
		</view>
		
	</view>
	<u-toast ref="uToast" ></u-toast>
</template>

<script>
	import PinyinUtils from '/common/util/pinyin.js' ;
	import {rules , radioList1} from "/common/js_file/service-item.js" ;
	const global = uniCloud.importObject("global",{customUI:true});
	const collectionNmae = 'temp_items' ;
	export default {
		data() {
			let form = {
				"title":'',
				"image":'',
				"time":60,
				"time_text":'',
				"price_one":298,
				"content": '',
				"orders":0,
				"is_show":1,
				"user_id":'',
				"sort":0,
				"create_time":'',
			}
			return {
				form,
				rules,
				radioList1,
				image:[],// 项目图片
				rangeClassify: [], // 服务类型
				uid:'',
				classify:""
			};
		},
		onLoad(val) {
			if(val.uid){
				this.uid = val.uid ;
				this.getData() ;
				this.getClassify();
			}else{
				this.$refs.uToast.show({
					title: '环境异常',type: 'error',duration:500,
					position:'top',url: '/pages/system/city/city'
				})
			}
		},
		methods: {
			submit() {
				this.$refs.form1.validate(valid => {
					if (valid) {
						this.update( this.form );
					} else {
						
					}
				});
			},
			update(form){
				form.price_one = parseInt(form.price_one * 100);
				form.time = parseInt(form.time);
				form.orders = parseInt(form.orders);
				form.sort = parseInt(form.sort);
				form.create_time = Date.now() ;
				delete form._id
				// return console.log(form);
				global.updateData(collectionNmae,form,{_id:this.uid}).then(res =>  {
					this.$refs.uToast.show({
						title: '修改成功',type: 'success',duration:500,
						position:'top',url: '/pages/project/temp-items/temp-items'
					})
				})
			},
			// 获取默认修改数据
			getData(){
				let field = "title,image,time,price_one,classify,sort,content,orders,is_show,user_id,create_time";
				global.getOne(collectionNmae,{_id:this.uid},field).then(res => {
					let data = res.data;
					this.image = {url:data.image};
					this.form = data;
					this.form.price_one = parseInt(data.price_one / 100);
					this.classify = data.classify._id;
				})
			},
			// 选择服务类型
			changeClassify(ev){
				this.rangeClassify.filter( item => {
					if(ev == item._id) return this.form.classify =  item ;
				})
			},
			// 获取服务类型
			getClassify(){
				global.getList('classify',{is_show:1,type:'tech'},"_id desc","title,_id",0,999).then( result =>{
					this.rangeClassify = result.data;
				} )
			},
			// 图片上传成功
			successImage(event){
				let filePath = event.tempFilePaths[0];
				this.form.image = filePath;
			},
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		}
	}
</script>

<style lang="scss">
	.body{
		width: 50%;
	}
</style>
